<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>房间</title>
    <script src="/html/js/axios.min.js"></script>
    <script src="/html/js/room.js"></script>
    <link rel="stylesheet" href="/html/css/room.css">
</head>
<body>

<table border="3" width="80%" cellspacing="0">
    <thead>
    <tr>
        <th>房间地址</th>
        <th>可容纳人数</th>
        <th>房间状态</th>
        <th>房间类型</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody id="bodyData"></tbody>
</table>
    <div class="rightDiv">
    查询房间信息：
    房间地址：<input type="text" id="address">
    房间状态：<select id="roomState">
    <option>不限</option>
    <option>正常</option>
    <option>设施损坏</option>
    </select><br>
    可住房间：<select id="inRoom">
    <option>不限</option>
    <option>可住房间</option>
    </select>
    房间类型：<select id="roomType">
    <option>不限</option>
    <option>男寝</option>
    <option>女寝</option>
    </select>
    <input type="button" value="查找" onclick="findByItem()">
    </div>
    <input type="button" value="添加" onclick="showAddRoom()">

<div class="showDiv" id="showDiv">
    <div id="addRoomDiv">
        房间地址:<input type="text" id="addAddress">
        可容纳人数:<input type="text" id="maxNum">
        <select id="addType">
            <option>男寝</option>
            <option>女寝</option>
        </select>
        <input type="button" value="添加" onclick="addRoom()">
        <input type="button" value="取消" onclick="no()">
    </div>
</div>

<div class="showDiv" id="showRoomDiv">
    <div id="showRoomInfo">
        房间地址 <span id="addressInfo"></span>
        可容纳人数 <span id="maxNumInfo"></span>
        房间状态 <span id="state"></span>
        已住人数 <span id="num"></span>
        房间类型 <span id="type"></span>

        <table border="3" width="70%" cellspacing="0">
            <thead>
            <tr>
                <th>学生姓名</th>
                <th>所在房间</th>
                <th>联系电话</th>
            </tr>
            </thead>
            <tbody id="stuInfo"></tbody>
        </table>
        <input type="button" value="确定" onclick="no()">
    </div>
</div>

<div class="showDiv" id="showUnitDiv">
    <div id="showUnitInfo">
        <table border="3" width="70%" cellspacing="0">
            <thead>
            <tr>
                <th>报损描述</th>
                <th>报损日期</th>
                <th>是否解决</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody id="unitInfo"></tbody>
        </table>
        <input type="text" name="unitInfo">
        <input type="button" value="退出" onclick="no()">
    </div>
</div>

</body>
</html>